body,
body[data-theme='light'] {
  /* // Primary */
  --app-color-primary: hsl(211, 100%, 50%);
  --app-color-primary-hsl: 211, 100%, 50%;
  --app-color-primary-contrast: hsl(240, 24%, 100%);
  --app-color-primary-contrast-hsl: 240, 24%, 100%;

  /* // Dark */
  --app-color-dark: hsl(240, 3%, 11%);
  --app-color-dark-hsl: 240, 3%, 11%;
  --app-color-dark-contrast: hsl(240, 24%, 100%);
  --app-color-dark-contrast-hsl: 240, 24%, 100%;

  /* // Light */
  --app-color-light: hsl(240, 24%, 100%);
  --app-color-light-hsl: 240, 24%, 100%;
  --app-color-light-contrast: hsl(0, 0%, 11%);
  --app-color-light-contrast-hsl: 0, 0%, 11%;

  --app-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;

  --app-color-grey-50: #fafafa;
  --app-color-grey-50-hsl: 0, 0%, 98%;

  --app-color-grey-100: #f5f5f5;
  --app-color-grey-100-hsl: 0, 0%, 96%;

  --app-color-grey-200: #eeeeee;
  --app-color-grey-200-hsl: 0, 0%, 93%;

  --app-color-grey-300: #e0e0e0;
  --app-color-grey-300-hsl: 0, 0%, 88%;

  --app-color-grey-400: #bdbdbd;
  --app-color-grey-400-hsl: 0, 0%, 74%;

  --app-color-grey-500: #9e9e9e;
  --app-color-grey-500-hsl: 0, 0%, 62%;

  --app-color-grey-600: #757575;
  --app-color-grey-600-hsl: 0, 0%, 46%;

  --app-color-grey-700: #616161;
  --app-color-grey-700-hsl: 0, 0%, 38%;

  --app-color-grey-800: #424242;
  --app-color-grey-800-hsl: 0, 0%, 26%;

  --app-color-grey-900: #212121;
  --app-color-grey-900-hsl: 0, 0%, 13%;

  --app-color-grey-A100: #d5d5d5;
  --app-color-grey-A100-hsl: 0, 0%, 84%;

  --app-color-grey-A200: #aaa;
  --app-color-grey-A200-hsl: 0, 0%, 67%;

  --app-color-grey-A400: #303030;
  --app-color-grey-A400-hsl: 0, 0%, 19%;

  --app-color-grey-A700: #616161;
  --app-color-grey-A700-hsl: 0, 0%, 38%;

  // Cursors
  --app-cursor-default: url('/assets/cursors/normal-select.svg');
  --app-cursor-pointer: url('/assets/cursors/link-select.svg');
  --app-cursor-text-select: url('/assets/cursors/text-select.svg');
  --app-cursor-help-select: url('/assets/cursors/help-select.svg');

  // the following two cursors are animated, but will be rendered as a static
  // image by the browser
  --app-cursor-busy: url('/assets/cursors/busy.webp');
  --app-cursor-working-in-bg: url('/assets/cursors/working-in-background.webp');
}

body.dark {
  /* // Primary */
  --app-color-primary: hsl(211, 100%, 50%);
  --app-color-primary-hsl: 211, 100%, 50%;
  --app-color-primary-contrast: hsl(240, 24%, 100%);
  --app-color-primary-contrast-hsl: 240, 24%, 100%;

  /* // Dark */
  --app-color-dark: hsl(240, 24%, 100%);
  --app-color-dark-hsl: 240, 24%, 100%;
  --app-color-dark-contrast: hsl(0, 0%, 11%);
  --app-color-dark-contrast-hsl: 0, 0%, 11%;

  /* // Light */
  --app-color-light: hsl(240, 3%, 11%);
  --app-color-light-hsl: 240, 3%, 11%;
  --app-color-light-contrast: hsl(240, 24%, 100%);
  --app-color-light-contrast-hsl: 240, 24%, 100%;
}
